<template>
    <div class="yuyue">
        <i @click="goBack" class="el-icon-arrow-left"></i>
        <div class="yuh3">预约保洁</div>
        <div class="yuyue-list">
            <div class="xuanze xuanze1">
                <span>预约时间</span>
                <div class="yy-datatime">
                    <mt-button @click.native="openPicker">{{ dateTime }}</mt-button>
                    <mt-datetime-picker
                        ref="picker"
                        type="datetime"
                        @confirm="handleConfirm"
                        :startDate="startDate"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        hour-format="{value} 时"
                        minute-format="{value} 分">
                    </mt-datetime-picker>
                </div>
            </div>

            <div class="xuanze xuanze2">
                <span>套餐类目</span>
                <div class="xuanzeLei">
                    {{ selectBao.cmItem.category }}
                </div>
            </div>

            <div class="xuanze xuanze2">
                <span>套餐项目</span>
                <div class="xuanzeLei">
                    {{ selectBao.cmItem.name }}
                </div>
            </div>

            <div class="xuanze xuanze3">
                <span>联系方式</span>
                <div class="address" @click="addadd">
                    <div>
                        <p>{{ myAddress.name }} {{ myAddress.phone }}</p>
                        <p>{{ myAddress.address }}</p>
                    </div>
                    <i></i>
                </div>
            </div>

            <!-- 地址组件 -->
            <mt-popup class="dizhicomponent"  v-model="popupVisible" position="right" :modal="false">
                <MyAddress @closePop="closePop" @checkChoose="checkChoose" ></MyAddress>
            </mt-popup>

            <div class="xuanze xuanze4">
                <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="我要留言"
                    v-model="textarea">
                </el-input>
            </div>           
            
        </div>

        <p class="yy-notice">*预约成功后客服三十分钟内给您安排并向您回电确认.</p>

        <button class="yy-btn" @click="order">开始预约</button>
        
    </div>
</template>


<script>
import { MessageBox } from 'mint-ui';
import { DatetimePicker } from 'mint-ui'
import moment from 'moment'
import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
Vue.component(DatetimePicker.name, DatetimePicker)
import MyAddress from '@/components/Myaddress.vue'

export default {
    components:{
        MyAddress
    },
    created () {
        let itemId = this.$route.query.itemId;
        this.baojieMessage({itemId:itemId})
    },
    data () {
        return {
            hours:this.$route.query.hours,
            myAddress: {},
            popupVisible: false,
            message: '',
            textarea: '',
            dateTime: '',
            startDate: new Date()
        }
    },
    computed: {
        ...mapState({
            selectBao: state => state.baojieModules.selectBao
        }),
        category(){
            return this.selectBao.category || [];
        }
    },
    methods: {
        openPicker () {
            this.$refs.picker.open()
        },
        handleConfirm (data) {
            var date = moment(data).format('YYYY/MM/DD HH:mm')
            this.dateTime = date
        },
        ...mapActions({
            baojieMessage: 'baojieModules/baojieMessage',
            cleanOrderSubmit:"baojieModules/cleanOrderSubmit"
        }),
        addadd(){
            this.popupVisible = true
        },
        closePop(){
            this.popupVisible = false
        },
        checkChoose(data){
            this.myAddress.name = data.userName;
            this.myAddress.phone = data.mobileNo;
            this.myAddress.address = data.address;
            this.myAddress.addressId = data.addressId;
            this.popupVisible = false;
        },
        order(){
            let params = {
                scheduledTime:this.dateTime,
                itemId:this.selectBao.cmItem.itemId,
                note:this.textarea,
                orderType:2,
                addressId:this.myAddress.addressId,
                hours:this.hours
            }
            if(params.scheduledTime == ''){MessageBox('提示','请选择预约时间');return;}
            if(!params.addressId){MessageBox('提示','请选择联系方式');return;}
            this.cleanOrderSubmit(params);
        },
        goBack(){
            this.$router.go(-1);
        }
    }
}
</script>


<style scoped lang="scss">
@import "../../assets/style/bjfw.scss";
.el-textarea__inner {
    border: none !important;
}
.el-icon-arrow-left{
        position: fixed;
    top: 10px;
    color: white;
    z-index: 9999;
    background-color: #888;
    border-radius: 50%;
    font-size: 25px;
    left: 10px;
}
</style>
